<style type="text/css">
.opt1{
    border-radius:3px;
    box-shadow: 1px 1px 2px #FF555A;
    background-color:#FF555A;
    color:#fff;
    font-family:"Microsoft Yahei";
    width: 60px;
    transition: background-color 0.3s,box-shadow 0.3s;
    -webkit-transition: background-color 0.3s,box-shadow 0.3s; /* Safari */
}
.opt1:hover{
    text-decoration:none;
    cursor:pointer;
    color:#fff;
    background-color:#76D233;
    box-shadow:1px 1px 2px #76D233;
}
.dis{
    border-radius:3px;
    box-shadow: 1px 1px 2px #666;
    background-color:#999;
    color:#fff;
    font-family:"Microsoft Yahei";
    width: 60px;
    filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
    -moz-opacity:0.5; /*Firefox私有，透明度50%*/
    opacity:0.5;/*其他，透明度50%*/
}
.dis:hover{
    text-decoration:none;
    cursor:pointer;
    color:#fff;
    background-color:#999;
    box-shadow:1px 1px 2px #999;
}
.warnning{
    margin-bottom: 20px;
    width: auto;
    border: 3px solid red;
    padding: 0 5px;
    font-family:"Microsoft Yahei";
    font-size: 20px;
    font-weight: bold;
    color: #219D55;
}
</style>
<{script src="coms/md5.js" app=desktop}>
<{if $goods_spec_images && count($goods_spec_images)>0}>
<div id="goods_spec_images">
<{foreach from=$goods_spec_images item=imageid}>
<input type="hidden" name="img[<{$imageid}>]" value="<{$imageid|storager:'s'}>" />
<{/foreach}>
</div>
<{/if}>
<textarea id="goodsTpl" style="display:none;">
  <tr data-pid="{product_id}">
    <td>{spec}</td>
    <td>
      <input type="hidden" name="{idx}[product_id]" value="{product_id}">
      <!--<input type="hidden" name="{idx}[spec_id]" value="{spec_id}" class="spec_id">
      <input type="hidden" name="{idx}[spec_value]" value="{spec_value}" class="spec_value">
      <input type="hidden" name="{idx}[spec_value_id]" value="{spec_value_id}" class="spec_value_id">-->
      <{input type="text" value="{bn}" class="bn" name="{idx}[bn]"}>
    </td>
    <td>
      <{permission perm_id='editmarketable'}><input type="checkbox" {status.checked} value="{status}" name="{idx}[status]"><{/permission}>
    </td>
    <td>
      <{permission perm_id='editstore'}><{input type="text" vtype="unsigned" value="{store}" name="{idx}[store]"}><{/permission}>
    </td>
    <td>
      <{permission perm_id='editstore'}>{freez}<{/permission}>
    </td>
    <td nowrap>
      <{permission perm_id='editprice'}>
      <{input type="text" vtype="unsigned" value="{price}" name="{idx}[price]"}>
      <{/permission}>
      <input type="hidden" value='{member_lv_price}' class="member-lv-price" name="{idx}[member_lv_price]">
      <{permission perm_id='editmemberlevelprice' noshow='true'}><{img src="bundle/btn_edit.gif" align="absmiddle" app="desktop"}> <a href="javascript:void(0);" class="memberprice"><{t}>会员价<{/t}></a><{/permission}>
    </td>
    <td>
      <{permission perm_id='editcostprice'}><{input type="text" vtype="unsigned" value="{cost}" name="{idx}[cost]"}><{/permission}>
    </td>
    <td>
      <{permission perm_id='editmktprice'}><{input type="text" vtype="unsigned" value="{mktprice}" name="{idx}[mktprice]"}><{/permission}>
    </td>
    <td>
      <{input type="text" vtype="unsigned" value="{weight}" name="{idx}[weight]" size="4"}>
    </td>
    <td>
      <{input type="text" value="{store_place}" name="{idx}[store_place]" size="4"}>
    </td>
    <td>
      <input type="checkbox" {is_default.checked} value="{is_default}" name="{idx}[is_default]" size="4">
    </td>
    <td><a href="javascript:void(0);" class="clean {unavailable}" title="{title}" data-uid="{idx}">清除</a></td>
  </tr>
</textarea>

<form action="" method="post" class="specification" id="specification">
  <div class="tt"><strong>商品规格</strong>点击编辑修改当前商品的规格。</div>
  <div style='margin-bottom:15px'><span class='warnning'>请确保所选规格都有货品，若没有，请点击货品信息补全按钮</span></div>
  <div class="td">
    <div id="update_news" class="clearfix" style="display:none">
      <{include file="admin/goods/detail/spec/set_spec_specs_radio.html"}>
    </div>
    <div style="margin-top:1em;">共<b class="product-number"><{$products|count}></b>件货品</div>
    <div class="spec-tree">
      <table cellspacing="0" cellpadding="0" border="0" class="gridlist" id="goods-table">
        <thead>
          <tr>
            <th>规格值</th>
            <th>规格操作</th>
            <th style="width:auto;">条码</th>
            <th style="width:4%;">上架</th>
            <th style="width:6%;">库存</th>
            <th style="width:6%;">冻结库存</th>
            <th style="width:15%;">销售价</th>
            <th style="width:8%;">成本价</th>
            <th style="width:8%;">市场价</th>
            <th style="width:8%;">重量(g)</th>
            <th style="width:8%;">货位</th>
            <th style="width:5%;">默认货品</th>
            <!-- <th style="width:4%;">操作</th> -->
          </tr>
        </thead>
        <tbody id="dataNode1">
        <{foreach from=$products key=key item=item}>
          <tr>
            <td><{$item.spec_info}></td>
            <td>
                <a href="#" id="btnEditSpec-<{$key+1}>" seq=<{$key+1}> name="btnEditSpec" class="btn opt1" title="编辑规格" onclick="">编辑</a>
                <a href="#" id="btnSaveSpec-<{$key+1}>" seq=<{$key+1}> name="btnSaveSpec" class="btn opt1" title="保存规格" onclick="" style="display:none">保存</a>
                <a href="#" id="btnSaveSpec-<{$key+1}>" seq=<{$key+1}> name="btnCanelSpec" class="btn opt1" title="取消" onclick="" style="display:none">取消</a>
                <input type="hidden" value='<{$item.product_id}>' id="proId"/>
            </td>
            <td><{$item.barcode}></td>
            <td><{if $item.status eq "true"}>是<{else}>否<{/if}></td>
            <td><{$item.store}></td>
            <td><{$item.freez}></td>
            <td><{$item.price}></td>
            <td><{$item.cost}></td>
            <td><{$item.mktprice}></td>
            <td><{$item.weight}></td>
            <td><{$item.store_place}></td>
            <!-- <td><{$item.member_lv_price}></td> -->
            <td><{if $item.is_default eq "true"}>是<{else}>否<{/if}></td>
          </tr>
          <{/foreach}>
        </tbody>
      </table>
      <div id="pager" class="pager gridlist-footer">
        <a title="上一页" class="prev" href="javascript:void(0)">&lt;上一页</a>
        <a title="下一页" class="next" href="javascript:void(0)">下一页&gt;</a>
      </div>
    </div>
  </div>

  <div class="table-action" style="border-top:0;">
    <!-- <{button class="save-action" label=$___b2c="保存"|t:'b2c'}> -->
    <input id="btnComplete" type="button" class="btn opt1" title="补全货品规格" value="补全货品" width="180px">
    <input id="btnClose" type="button" class="btn opt1" title="关闭当前页面" value="关闭">
  </div>
</form>

<script type="text/javascript">
// BEGIN 添加修改规格相关js代码 by shenkai
var btnEditSpec=$$("[name=btnEditSpec]");
var btnSaveSpec=$$("[name=btnSaveSpec]");
var btnCanelSpec=$$("[name=btnCanelSpec]");
var btnComplete=$("btnComplete");
var btnClose=$("btnClose");
 /*编辑货品规格*/
 // alert(btnEditSpec);
//补全的货品无法编辑
function canelEdit(){
    btnEditSpec.each(function(el){
        if(el.getParent().getNext().get('html')==''){
             el.setStyle('display','none');
        }
    });
}
//补全货品按钮失效
function canelFullSpec(){
    btnEditSpec.each(function(el){
        if(el.getParent().getPrevious().get('html')==''){
             btnComplete.setStyle('display','none');
        }
        else{
            btnComplete.setStyle('display','');
            btnComplete.addEvent('click',fullAllSpec);
        }
    });
}
canelFullSpec();
canelEdit();

//加载默认数据
function loadDef(){
    //获取选中并显示的单选按钮元素
    var selSpecVal=$$('.switchable:not([style]) input[type=radio]:checked').get('value');
    var selSpecImg=$$('.switchable:not([style]) .spec-img tbody tr');
    // alert(selSpecVal);
    selSpecImg.each(function(el){
        var d_id=el.get('data-id').substr(el.get('data-id').lastIndexOf('_')+1);
        if(selSpecVal!=d_id){
            // alert(d_id);
            el.setStyle('display','none');
        }
        else{
            el.setStyle('display','');
        }
    });
}
/*补全所有所有规格货品*/
function fullAllSpec(){
    var goods_id=location.href.substr(location.href.lastIndexOf('=')+1);
    if(goods_id.indexOf('#')>0){
        goods_id=goods_id.substr(0,goods_id.length-1);
    }
    var myRequest=new Request({
        url:'index.php?app=b2c&ctl=admin_products&act=saveAllSpecProducts',
        method:'post',
        data: 'goods_id='+goods_id,
        onSuccess:function(responseText){
            if(responseText=='ok'){
                alert('补全货品信息成功！');
                 location.reload();
            }
            else{
                alert('货品信息已全，无需补全！');
            }
           
            canelEdit();
        }
    }).send();
}
// btnComplete.addEvent('click',fullAllSpec);
//编辑规格事件
function editSpec(){
    var spec=$("update_news");
    var specLength=Object.getLength($$('.typelist li').getChildren());
    if(specLength==0){
        alert('请先选择商品类型并设置对应的规格！');
        return;
    }
    spec.setStyle('display','');
    this.setStyle('display','none');
    var seq=this.get('seq');
    $$("[name=btnEditSpec][seq!="+seq+"]").removeEvent('click',editSpec);
    $$("[name=btnEditSpec][seq!="+seq+"]").removeClass('opt1');
    $$("[name=btnEditSpec][seq!="+seq+"]").addClass('dis');
    this.getNext().setStyle('display','');
    this.getNext().getNext().setStyle('display','');
    //表单关闭，补全按钮失效
    $('btnClose').set('disabled','true');
    $('btnClose').removeClass('opt1');
    $('btnClose').addClass('dis');
    $('btnComplete').set('disabled','true');
    $('btnComplete').removeClass('opt1');
    $('btnComplete').addClass('dis');
    //获取已保存的规格并显示在页面中
    txt=this.getParent().getPrevious().get('html');
    spec=txt.split('、');
    for(var i=0;i<spec.length;i++){
        det=spec[i].split('：');
        for(var j=0;j<det.length;j++){
            if(j%2==0){
                $$(".speclist[data-spec-name="+det[j]+"] li input[title="+det[j+1]+"]").set('checked','true');
                $$(".spec-img")
            }
        }
    }
    loadDef();
    //绑定切换规格事件
    $$('.typelist li').addEvent('click',loadDef);
    $$('.spec-item input[type=radio]').addEvent('change',loadDef);

}

//绑定编辑规格事件
btnEditSpec.addEvent('click',editSpec);

/*编辑取消按钮*/
btnCanelSpec.addEvent('click',function(){
    var spec=$("update_news");
    spec.setStyle('display','none');
    btnEditSpec.setStyle('display','');
    btnSaveSpec.setStyle('display','none');
    btnClose.setStyle('display','');
    this.setStyle('display','none');
    //表单关闭，补全按钮生效
    $('btnClose').set('disabled','');
    $('btnClose').removeClass('dis');
    $('btnClose').addClass('opt1');
    $('btnComplete').set('disabled','');
    $('btnComplete').removeClass('dis');
    $('btnComplete').addClass('opt1');
    var seq=this.get('seq');
    $$("[name=btnEditSpec][seq!="+seq+"]").removeClass('dis');
    $$("[name=btnEditSpec][seq!="+seq+"]").addClass('opt1');
    btnEditSpec.addEvent('click',editSpec);
    canelEdit();
});
/*保存货品规格*/
btnSaveSpec.addEvent('click',function(){
    var specItemChecked=$$('input[type=radio]:checked');
    //获取规格个数
    var specNum=Object.getLength($$('.typelist li').getChildren());
    //如果没有选择规格
    if(specItemChecked.length==0){
         alert('请选择规格！');
         return;
    }
    //如果规格没有选全
    if(specItemChecked.length<specNum){
         alert(specNum+'个规格值必须都选择！');
         return;
    }
    //获取规格id
    var spec_id=$$('.typelist li').get('data-spec-id');
    spec_value=specItemChecked.get('title');

    spec_private_value_id=specItemChecked.get('p_id');
    spec_value_id=specItemChecked.get('value');
    prouduct_id=this.getNext().getNext().get('value');
    //定义显示规格文本
    var spec_info='';
    for(var i=0;i<spec_value.length;i++){
        spec_info+=specItemChecked[i].getParent().getParent().get('data-spec-name')+'：'+spec_value[i]+'、';
    }
    spec_info=spec_info.substr(0,spec_info.length-1);
    var seq=this.get('seq');
    var doc=this;
    //获取选择的规格图片的值
    var spec_goods_images=$$('.switchable:not([style]) tr:not([style]) .spec_goods_images').get('value');
    //获取商品ID
    var href=location.href.substr(location.href.lastIndexOf('=')+1);
    var goods_id=href.substr(0,href.length-1);
    //通过ajax保存选择的规格值
    var spec_desc={"spec_value":spec_value,"spec_private_value_id":spec_private_value_id,"spec_value_id":spec_value_id,"spec_goods_images":spec_goods_images};
    var myRequest=new Request({
        url:'index.php?app=b2c&ctl=admin_products&act=saveSpecByAjax',
        method:'post',
        data: 'goods_id='+goods_id+'&spec_info=' + spec_info+'&spec_desc=' + JSON.encode(spec_desc)+'&product_id=' + prouduct_id+'&spec_id='+JSON.encode(spec_id),
        onSuccess:function(responseText){
            var resp=JSON.decode(responseText);
            if(resp.status==1){
               var spec=$("update_news");
               spec.setStyle('display','none');
               btnEditSpec.setStyle('display','');
               btnSaveSpec.setStyle('display','none');
               btnClose.setStyle('display','');
               btnCanelSpec.setStyle('display','none');
               doc.getParent().getPrevious().set('html',spec_info);
               //表单关闭，补全按钮生效
               $('btnClose').set('disabled','');
               $('btnClose').removeClass('dis');
               $('btnClose').addClass('opt1');
               $('btnComplete').set('disabled','');
               $('btnComplete').removeClass('dis');
               $('btnComplete').addClass('opt1');
               $$("[name=btnEditSpec][seq!="+seq+"]").removeClass('dis');
               $$("[name=btnEditSpec][seq!="+seq+"]").addClass('opt1');
               btnEditSpec.addEvent('click',editSpec);
            }
            canelEdit();
            canelFullSpec();
            alert(resp.msg);

        }
    }).send();
});


/*关闭当前页面*/
btnClose.addEvent('click',function(){
    window.close();
});
// END

//窗口视觉最大化
try{
    if(window.getSize().x < screen.availWidth || window.getSize().y < screen.availHeight){
        moveTo(0,0);
        resizeTo(screen.availWidth, screen.availHeight);
    }
}catch(e){}

//Class的另一种简单实现
var Klass = function(o) {
    var F = function() {
        typeof this.init === 'function' && this.init.apply(this, arguments);
    };
    F.prototype = o || {};
    F.prototype.setOptions = function() {
        this.options = Object.merge.apply(null, [{}, this.options].append(arguments));
        return this;
    };
    F.prototype.fireEvent = function(type, args) {
        type = this.options[type] || this.options['on' + type.capitalize()];
        typeof type === 'function' && type.apply(this, args);
        return this;
    };
    return F;
};

//table翻页组件
var Pager = new Klass({
    options: {
        tpl: 'goodsTpl',
        pager: 'pager',
        current: 1,
        paging: 10
    },
    init: function(container, data, options) {
        this.container = $(container);
        if(!this.container) return;
        this.setOptions(options);
        this.data = data;
        if(!this.data) return;
        this.total = this.data.length;
        this.paging = this.options.paging;
        this.totalPage = Math.ceil(this.total/this.paging);
        this.tpl = $(this.options.tpl).value;
        this.pager = $(this.options.pager);
        this.current = this.options.current;
        this.render(this.current);
        this.attach();
    },
    render: function(n) {
        this.goPage(n);
        this.updatePager();
    },
    attach: function() {
        this.pager.removeEvents('click').addEvents({
            'click': function(e) {
                var target = $(e.target);
                var n;
                if(target.hasClass('disabled')) {
                    return;
                }
                if(target.hasClass('prev')) {
                    n = this.current - 1;
                }
                else if(target.hasClass('next')) {
                    n = this.current + 1;
                }
                else if(target.hasClass('flip')) {
                    n = $(e.target).get('text').toInt();
                }
                else {
                    return;
                }
                this.render(n);
            }.bind(this)
        });
    },
    goPage: function(n) {
        var html = [];
        if(n < 1) n = 1;
        else if(n > this.totalPage) n = this.totalPage;
        if(this.total) {
            for(var i = this.paging * (n - 1), j = this.paging * n, l = this.total, d; i < j && i < l; i++) {
                d = this.data[i];
                Object.each(d, function(v, k) {
                    if(typeOf(v) === 'object') d[k] = JSON.encode(v);
                });
                html.push(this.tpl.substitute(d));
            }
            this.current = n;
        }
        this.container.set('html', html);
    },
    updatePager: function() {
        if(this.total > 10) {
            this.pager.setStyle('display','');
            var pageHtml = this.createLink();
            this.pager.innerHTML = pageHtml;
        }
        else this.pager.setStyle('display', 'none');
    },
    pageLink:function(from, to){
        var links = [];
        for(var i = from; i <= to; i++){
            links.push(this.current == i ? '<span class="current">'+i+'</span>' : '<a class="flip" href="javascript:void(0)">'+i+'</a>');
        }
        return links.join(' ');
    },
    createLink: function() {
        var prev = this.pager.getElement('.prev'),
            next = this.pager.getElement('.next'),
            links = [],
            t=this.totalPage,
            c=this.current;
        if(c == 1) {
            prev.addClass('disabled');
            next.removeClass('disabled');
        }
        else if(c == t) {
            prev.removeClass('disabled');
            next.addClass('disabled');
        }
        else {
            prev.removeClass('disabled');
            next.removeClass('disabled');
        }
        if(t<=10){
            links.push(this.pageLink(1,t));
        }else{
            if(t-c<8){
                links.push(this.pageLink(1,3));
                links.push(this.pageLink(t-8,t));
            }else if(c<8){
                links.push(this.pageLink(1,Math.max(c+3,8)));
                links.push(this.pageLink(t-1,t));
            }else{
                links.push(this.pageLink(1,3));
                links.push(this.pageLink(c-2,c+3));
                links.push(this.pageLink(t-1,t));
            }
        }
        return prev.outerHTML + links.join('...') + next.outerHTML;
    }
});

//用json存取数据
var GoodsSpec;
var goods_info = <{if $goods_info}><{$goods_info}><{else}>{}<{/if}>;
var Products = <{if $products}><{$products}><{else}>{}<{/if}>;
var Spec = <{if $selection_spec_json}><{$selection_spec_json}><{else}>{}<{/if}>;
var activeProducts = <{$activeProducts}>;
//展示货品数据
var goodsSpecTree = new Klass({
    options: {
        speclist:'.speclist',
        specIMG: '.spec-img',
        specMap: 'dataNode',
        switchTrigger: '.typelist',
        switchContent: '.spec-wrap',
        number: '.product-number'
    },
    count: 0,
    init: function(container, options){
        this.setOptions(options);
        this.container = $(container);
        if(!this.container) return;
        this.speclist = this.container.getElements(this.options.speclist);
        this.specLength = this.speclist.length;
        if(!this.specLength) return;
        this.specIMG = this.container.getElements(this.options.specIMG);
        this.specMap = $(this.options.specMap);
        this.switchTriggers = this.container.getElement(this.options.switchTrigger).getChildren();
        this.switchPanels = this.container.getElement(this.options.switchContent).getChildren();
        this.selectAll = this.container.getElements('.selectAll input[type=radio]');
        this.number = this.container.getElement(this.options.number);
        this.newProduct = {};
        this.attach();
        // this.build(this.speclist);
        this.createAllGoods(false);
    },
    attach: function() {
        var self = this;
        for(var i = 0; i < this.specLength; i++) {
            (function(i) {
                var trigger = this.switchTriggers[i],
                    panel = this.switchPanels[i],
                    //sel = this.selectAll[i],
                    list = this.speclist[i];
                trigger.addEvent('click', function(e) { 
                    this.addClass('act').getSiblings('.act').removeClass('act');
                    panel.show().getSiblings().hide();
                    $$('.spec_img').setStyle('display','');
                });
                var chks = list.getElements('input[type=radio]');
                // sel.addEvent('change', function(e) {
                //     chks.filter(function(el){return !el.disabled;}).set('checked', this.checked);
                //     self.build(chks, list, i, trigger);
                // })
                chks.addEvent('change', function(e) {

                    self.build(this, this.getParent(self.options.speclist), i, trigger);

                });
            }).call(this, i);
        }
        this.container.addEvents({
            'click:relay(.btn-createAllGoods)': function(e) {
                this.createAllGoods();
            }.bind(this),
            'click:relay(.chooseSpecImage)': function(e) {
                var target = this;
                Ex_Loader('modedialog',function(){
                    new imgDialog('<{$spec_image_request_url}>',{
                        handle: target,
                        onCallback: function(img,imgsrc){
                            target.getPrevious('span').getElement('img').src = imgsrc;
                            // target.getParent('tr').getElement('input[name*="[spec_image]"]').value = img;
                            var id = target.getParent('tr').get('data-id').split('_');
                            Spec[id[0]].option[id[1]].spec_image = img;
                        }
                    });
                });
            },
            'click:relay(.sel-albums-images)': function(e) {
                var tNode = this.getParent('tr');
                var imgArea = tNode.getElement('.sel-imgs-area');
                var selImgs = imgArea.getNext('.spec_goods_images');
                var data = 'selImgs='+selImgs.get('value');
                var tpl = '<img src="{imgsrc}">';
                if($('goods_spec_images')) data += '&' + $('goods_spec_images').toQueryString();
                new Dialog('index.php?app=b2c&ctl=admin_goods_editor&act=selAlbumsImg',{
                    title:'<{t}>关联商品图片<{/t}>',
                    ajaxoptions:{data:data, method:'post'},
                    callback:function(sel_img_data,src){
                        var html = '';
                        var id = tNode.get('data-id').split('_');
                        Spec[id[0]].option[id[1]].spec_goods_images = [];
                        src.length && src.each(function(v, i){
                            if(i < 4) html += '<img src="' + v + '">';
                            else if(i == 4) html += '...';
                            Spec[id[0]].option[id[1]].spec_goods_images.push({
                                image_id: sel_img_data[i],
                                image_url: v
                            });
                        });
                        imgArea.set('html',html);
                        selImgs.set('value',sel_img_data.join());
                        // tNode.getElement('input[name*="[spec_goods_images]"]').value = sel_img_data.join();
                    }
                });
            },
            'click:relay(.memberprice)': function(e) {
                var p=this.getParent('tr');
                var pid = p.get('data-pid');
                var mlvp = p.getElement('input.member-lv-price');
                var info = 'product_id=' + pid;
                var vl = mlvp.value;
                if(vl) {
                    vl = Object.toQueryString(JSON.decode(vl), 'level');
                    info += '&' + vl;
                }
                window.fbox = new Dialog('index.php?app=b2c&ctl=admin_goods_editor&act=set_mprice',{ajaxoptions:{data:info,method:'post'},modal:true});
                window.fbox.onSelect = function(arr){
                    var mlvprice = {};
                    var uid = mlvp.name.split('[')[0];
                    arr.each(function(el,i){
                        mlvprice[el.name] = el.value;
                    });
                    self.saveNewProduct(uid);
                    mlvp.value = JSON.encode(mlvprice);
                    Products[uid].member_lv_price = mlvprice;
                }
            },
            'click:relay(.clean:not(.disabled))': function(e) {
                var p = this.getParent('tr');
                p.getElements('input[type=text]').set('value', '');
                p.getElements('input[type=radio]').set('value', 'false').set('checked', false);
                var uid = this.get('data-uid');
                self.products.each(function(p, i) {
                    if(p.idx == uid) {
                        self.products[i] = {
                            idx: uid,
                            product_id: p.product_id,
                            spec: p.spec
                        };
                        // self.products.erase(p);
                    }
                });
                var oldProduct = Object.merge({}, Products[uid]);
                Products[this.get('data-uid')] = {
                    product_id: 'new',
                    status: 'false',
                    spec_desc: oldProduct.spec_desc
                };

                // delete Products[uid];
            },
            'click:relay(.save-action)': function(e) {
                var keys = [], i = 0, j = self.products.length, k, l = self.props.length, p, attr, flag;
                for(; i < j; i++) {
                    flag = false;
                    p = self.products[i];
                    if(!p.bn) {
                        for(k = 0; k < l; k++) {
                            attr = self.props[k];
                            if(attr === 'product_id' || attr === 'bn' || !p[attr] || p[attr] === 'false') {
                                flag = true;
                                continue;
                            }
                            alert('请填写"' + p.spec + '"商品货号。');
                            try{
                                self.specMap.getElement('input[name="' + p.idx + '[bn]"]').focus();
                            } catch(e) {}
                            return;
                            // flag = 1;
                            // break;
                        }
                    }
                    // if(flag === 1) return;
                    if(flag === true) continue;
                    else keys.push(p.idx);
                }
                // if(flag === 1) return;
                Object.each(Spec, function(v, k) {
                    Object.each(v.option, function(l, m) {
                        if(l.checked === false) delete Spec[k].option[m];
                    });
                });
                Object.each(Products, function(v, k){
                    if(keys.indexOf(k) == -1) delete Products[k];
                });
                self.saveNewProduct(keys);

                new Request.JSON({
                    url: 'index.php?app=b2c&ctl=admin_products&act=save_editor',
                    method: 'post',
                    data: 'spec=' + JSON.encode(Spec) + '&products=' + JSON.encode(Products) + "&goods[goods_id]=<{$goods_id}>",
                    onRequest: function() {
                      new MessageBox('正在加载...', {
                          type: 'notice'
                      });
                    },
                    onSuccess: function(rs) {
                        if(rs.result == 'success') {
                            MessageBox.success('操作成功');
                            if(rs.data.is_new == '1' && window.opener && window.opener.isNew){
                                window.opener.isNew(JSON.encode(rs.data));
                            }else if(window.opener && window.opener.rendSpec){
                                window.opener.rendSpec(rs.data.used_spec,rs.data.productNum);
                            }
                            if(confirm('保存成功,是否关闭窗口?')) window.close();
                        }else{
                            Products = Object.merge(<{if $products}><{$products}><{else}>{}<{/if}>, Products);
                            return MessageBox.error(rs.msg);
                        }
                    }
                }).send();
            }
        });
        this.specIMG.addEvents({
            'change:relay(input[type=text])': function(e) {
                var str = this.name;
                var id = str.match(/\[([^\]]*)\]/)[1];
                id = id.split('_');
                Spec[id[0]].option[id[1]].spec_value = this.value;
            }
        });
        this.specMap.addEvents({
            'change:relay(input[type=radio])': function(e) {
                var str = this.name;
                var uid = str.split('[')[0];
                var prop = str.match(/\[([^\]]*)\]/)[1];
                var sib;
                if(prop == 'is_default') {
                    for(var i = 0, j = self.products.length, k; i < j; i ++) {
                        k = self.products[i];
                        if(k[prop] == 'true') {
                            k[prop] = 'false';
                            k[prop + '.checked'] = '';
                            if(Products[k.idx]) Products[k.idx][prop] = 'false';
                            break;
                        }
                    }
                    this.getParent('tr').getSiblings().some(function(el){
                        sib = el.getElement('input[name*="[' + prop + ']"]:checked');
                        if(sib) {
                            sib.checked = false;
                            sib.value = 'false';
                            return true;
                        }
                        else return false;
                    });
                }
                this.value = this.checked ? 'true' : 'false';
                self.storeData(this, uid, prop, sib);
            },
            'blur:relay(input[type=text])': function(e) {
                if(!self.validate(this)) {
                    (function(){this.focus()}).delay(0, this);
                    return false;
                }
            },
            'change:relay(input[type=text])': function(e) {
                var str = this.name;
                var uid = str.split('[')[0];
                var prop = str.match(/\[([^\]]*)\]/)[1];
                self.storeData(this, uid, prop);
            }
        });
    },
    build: function(element, parent, i, trigger) {

        // var d = new Date();
        var id = parent.get('data-spec-id');
        if(element.length) element.each(function(el){
            this.storeSpec(el, id, parent);
        }, this);
        else this.storeSpec(element, id, parent);
        // trigger && trigger.getElement('i').set('text', parent.getElements('input[type=radio]:checked').length);
        this.createSpecGrid(parent, i, id);
        // this.createAllGoods();
        // console.log(new Date() - d + 'ms');
    },
    storeSpec: function(el, id, parent) {
        console.log(Spec[id]);
        var sid = el.value;
        if(el.checked) {
            if(!Spec[id]) {
                Spec[id] = {
                    spec_name: parent.get('data-spec-name'),
                    spec_id: id,
                    spec_type: parent.get('data-spec-type'),
                    option: {}
                };
            }
            if(!Spec[id].option[sid]) {
                Spec[id].option[sid] = {
                    private_spec_value_id: el.name,
                    spec_value: el.title,
                    spec_value_id: sid
                };
                if(Spec[id].spec_type == 'image') Object.merge(Spec[id].option[sid], {
                    spec_image: parent.getElement('input[key=spec_image_' + sid + ']').value,
                    spec_image_url: parent.getElement('img[key=spec_img_' + sid + ']').src
                });
            }
            else delete Spec[id].option[sid].checked;
        }
        else if(Spec[id]) {
            Spec[id].option[sid].checked = false;
        }
    },
    createAllGoods: function(needs) {
        this.specElements = [];
        this.speclist.each(function(item, index) {
            var radio = item.getElements('input[type=radio]:checked');
            if(radio.length > 0) {
                this.specElements.push({
                    id: item.get('data-spec-id'),
                    name: item.get('data-spec-name'),
                    input: radio
                });
            }
        }, this);

        this.products = [];
        var length = this.specElements.length;
        if(length == this.specLength) {
            this.processProducts(this.specElements, 0, length);
        }
        else if(needs !== false) {
           alert('每个规格项至少选中一项，才能组合成完整的货品信息。');
           this.processProducts(this.specElements, 0, length);
        }
        this.number.set('text', this.products.length);
        this.createGoodsGrid();

        this.count = 0;
        if(Object.getLength(this.products) && Object.getLength(goods_info)) {
            this.products.some(function(v, i) {
                if(v.bn) {
                    var n = v.bn.match(/^.+\-(\d+)$/);
                    if(n && n[1]) {
                        this.count = Math.max(this.count, Number(n[1]) + 1);
                        return false;
                    }
                }
                return true;
            }, this);
        }
    },
    createSpecGrid: function(list, i, spec_id) {
        // alert('d55555');
        var spec = Spec[spec_id];
        console.log(spec.option);
        var html = ['<thead>'];
        html.push('<tr>');
        html.push('<th>规格</th>');
        if(spec.spec_type == 'image') html.push('<th>规格图片</th>');
        html.push('<th>关联商品图片</th>');
        html.push('</tr>');
        html.push('</thead>');
        html.push('<tbody>');
        Object.each(spec.option, function(v, k) {
            if(v.checked !== false) {
                html.push('<tr data-id="' + spec_id + '_' + v.spec_value_id + '">');
                html.push('<td>');
                if(spec.spec_type == 'image') {
                    html.push('<span class="spec-colorbox"><img src="' + list.getElement('img[key=spec_img_' + v.spec_value_id + ']').src + '"></span>');
                }
                // html.push('<{input type="text" name="spec_value[' + spec_id + '_' + v.spec_value_id + ']" id="" value="' + v.spec_value + '"}>');
                html.push('<span>'+v.spec_value+'</span')
                html.push('</td>');
                if(spec.spec_type == 'image') html.push('<td><span class="specImage"><img src="' + v.spec_image_url + '" /></span></td>');
                var imgid = [];
                var imgurl = [];
                v.spec_goods_images && v.spec_goods_images.each(function(img, i){
                    imgid.push(img.image_id);
                    if(i < 4) imgurl.push('<img src="' + img.image_url + '">');
                    else if(i == 4) imgurl.push('...');
                });
                imgid = imgid.join();
                imgurl = imgurl.join('');
                html.push('<td><!--input type="hidden" name="spec[' + spec_id + '][' + v.spec_value_id + '][spec_goods_images]" value="' + imgid + '"--> <span class="sel-albums-images lnk">选择图片</span> <span class="sel-imgs-area">' + imgurl + '</span><input class="spec_goods_images" type="hidden" value="' + imgid + '"></td>');
                html.push('</tr>');
            }
        })
        html.push('</tbody>');
        // alert(html);
        var table = new Element('table.gridlist').set('html', html);
        //inject插入元素,erase移除元素
        table.inject(this.specIMG[i].erase('html'));

        html = null;
    },
    props: ['product_id', 'status', 'bn', 'store', 'freez' ,'price', 'member_lv_price', 'cost', 'mktprice', 'weight', 'store_place', 'is_default'],
    processProducts: function(arr, index, length, id, name, value, pvid) {
        var specid = {}, spec_name = [arr[index].name], specvalue = {}, specpvid={}, sname, spec_id = arr[index].id, uid;
        if(name) {
            spec_name = name.concat(spec_name);
        }
        if(value) specvalue = value;
        // if(id) specid = id;
        arr[index].input.each(function(a, i){
            specid[spec_id] = a.value;
            specpvid[spec_id] = a.name;
            specvalue[spec_id] = Spec[spec_id].option[a.value].spec_value;
            if(id) {
                Object.merge(specid, id);
            }
            if(pvid) {
                Object.merge(specpvid, pvid);
            }
            if(index < length - 1) {
                this.processProducts(arr, index + 1, length, specid, spec_name, specvalue, specpvid);
            } else if(index == length - 1) {
                uid = getUniqueID(Object.values(specid).join(';'));
                sname = [];
                spec_name.each(function(s, j) {
                    spec_id = arr[j].id;
                    if(Products[uid] && Products[uid].spec_desc) Products[uid].spec_desc.spec_value[spec_id] = specvalue[spec_id];
                    sname.push(s + ':' + specvalue[spec_id]);
                });
                sname = sname.join('，');
                this.mapping(uid, sname, specvalue, specid, specpvid);
            }
        }, this);
    },
    mapping: function(uid, specname, specvalue, specid, specpvid) {
        var arr = {};
        this.props.each(function(p, i) {
            if(Products[uid] && Products[uid][p]) {
                arr[p] = Products[uid][p];
            }
            else if(goods_info[p]) {
                arr[p] = goods_info[p];
                if(p == 'product_id') {
                    arr[p] = 'new';
                }
                else if (p == 'bn') {
                    arr[p] = arr[p] + '-' + this.count;
                    this.count ++;
                }
            }
            // arr[p] = Products[uid] ? Products[uid][p] || '' : '';
            if((p == 'status' || p == 'is_default') && arr[p] == 'true') {
                arr[p + '.checked'] = 'checked';
            }
            else if(p == 'product_id' && !arr[p]) {
                arr[p] = 'new';
            }
        }, this);
        if(!Products[uid]) {
            this.newProduct[uid] = Object.merge({}, arr);
            this.newProduct[uid].spec_desc = {};
            this.newProduct[uid].spec_desc.spec_private_value_id = Object.merge({}, specpvid);
            this.newProduct[uid].spec_desc.spec_value = Object.merge({}, specvalue);
            this.newProduct[uid].spec_desc.spec_value_id = Object.merge({}, specid);
        }

        if(Products[uid] && activeProducts && activeProducts.length && activeProducts.indexOf(Products[uid].product_id) > -1) {
            arr.unavailable = 'disabled';
            arr.title = '尚有未处理的订单，不能清除此货品。';
        }
        else {
            arr.title = '不生成此货品';
        }
        arr.idx = uid;
        if(specname) arr.spec = specname;
        this.products.push(arr);
    },
    createGoodsGrid: function() {
        this.specMap.store('instance', this);
        // if(!arr) return this.specMap.erase('html');
        var current = this.container.getElement('.current');
        current = current ? parseInt(current.get('text')) : 1;
        this.pager = new Pager(this.specMap, this.products, {current: current, paging: 10});
    },
    saveNewProduct: function(uid) {
        if(typeOf(uid) === 'array' && uid.length) {
            if(Object.getLength(this.newProduct)) {
                Object.each(this.newProduct, function(v, k) {
                    if(uid.indexOf(k) == -1) {
                        delete this.newProduct[k];
                    }
                }, this);
            }
        }
        else if(uid) {
            if(!Products[uid]) {
                Products[uid] = Object.merge({}, this.newProduct[uid]);
                delete this.newProduct[uid];
            }
            return;
        }
        if(Object.getLength(goods_info) && Object.getLength(this.newProduct)) {
            Object.each(this.newProduct, function(v, k) {
                if(v) Products[k] = Object.merge({}, v);
            });
            this.newProduct = {};
        }
    },
    storeData: function(el, uid, prop, sib) {
        this.saveNewProduct(uid);
        Products[uid][prop] = el.value;

        if(prop == 'bn' && Object.getLength(goods_info)) {
            var n = el.value.match(/^.+\-(\d+)$/);
            if(n && n[1]) {
                this.count = Math.max(this.count, Number(n[1]) + 1);
            }
        }

        for(var i = 0, j = this.products.length, k; i < j; i++) {
            k = this.products[i];
            if(k.idx === uid) {
                k[prop] = el.value;
                if(el.type == 'radio') {
                    k[prop + '.checked'] = el.checked ? 'checked' : '';
                }
                break;
            }
        }
    },
    validate: function(el) {
        var str = el.name;
        var uid = str.split('[')[0];
        var prop = str.match(/\[([^\]]*)\]/)[1];
        if(prop == 'bn' && Products[uid] && activeProducts && activeProducts.indexOf(Products[uid].product_id) > -1) {
            var vtype = el.get('vtype');
            if(!vtype || vtype.indexOf('required') == -1) el.set('vtype', 'required' + (vtype ? '&&' + vtype : ''));
        }
        return validate(el);
    }
});

function getUniqueID(str) {
    return hex_md5(str).substr(0, 10);
}

if(opener && opener.$('new_goods_spec') && opener.$('new_goods_spec').value){
    GoodsSpec = JSON.decode(opener.$('new_goods_spec').value);
    if(GoodsSpec) {
        Products = GoodsSpec.product;
        Spec = GoodsSpec.spec;
        new Request.HTML({
            url:'index.php?app=b2c&ctl=admin_products&act=ajax_set_spec&type_id=<{$type_id}>',
            method:'post',
            data: 'spec=' + JSON.encode(Spec) + '&products=' + JSON.encode(Products),
            update: 'update_news',
            onSuccess:function(re){
                new goodsSpecTree('specification');
            }
        }).send();
    }
}
else {
    new goodsSpecTree('specification');
}
</script>
